const App2 = {
    setup(){
        //模拟数据
        //const myData = {"studentList":[{"id":1,"username":"张1","sex":"男","height":180},{"id":8,"username":"王4","sex":"女","height":180},{"id":11,"username":"老六","sex":"男","height":180},{"id":12,"username":"老七","sex":"男","height":180},{"id":13,"username":"老四","sex":"女","height":180}],"mycount":5,"mycountboy":3,"mycountgirl":2}
        const vueHeight = Vue.ref('180');
        const studentList = Vue.ref( [] )
        const mycount = Vue.ref(0)
        const mycountboy = Vue.ref(0)
        const mycountgirl = Vue.ref(0)

        const query =()=>{
            axios.get('test?height='+vueHeight.value)
                .then(response=>{
                console.log('收到数据啦，然后给vue的数据，进行赋值')
                console.log(response)
                studentList.value = response.data.studentList;
                mycount.value = response.data.mycount;
                mycountboy.value = response.data.mycountboy;
                mycountgirl.value = response.data.mycountgirl;
            })
        }

        return {query,vueHeight,studentList,mycount,mycountboy,mycountgirl}

    },
    template:`
        请输入您想查询的身高:<input type="text" v-model="vueHeight">
        <button @click="query">查询</button>
        <table border="1px">
            <tr>
                <td>ID</td>
                <td>名字</td>
                <td>性别</td>
                <td>身高</td>
            </tr>
            <tr v-for="stu of studentList">
                <td>{{stu.id}}</td>
                <td>{{stu.username}}</td>
                <td>{{stu.sex}}</td>
                <td>{{stu.height}}</td>
            </tr>
        </table>
        <div>总记录条数：{{mycount}}</div>
        <div>男生条数：{{mycountboy}}</div>
        <div>女生条数：{{mycountgirl}}</div>
    `
}